/*
 * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */

import Inula, { useEffect } from 'openinula';
import './index.css';
import { useHistory, useLocation, NavLink, BrowserRouter, Redirect, Switch, Route } from 'inula-router'
import Home from './page/Home';
import Location from './page/Location';
import Repo from './page/repo';

function Nav() {
  const history = useHistory();
  const routerJump = path => history.push(path)
  // 主应用告诉子应用跳转路由
  useEffect(() => {
    window.$wujie?.bus.$on("inula-router-change", routerJump);
    window.$wujie?.bus.$on("routeChange", (path)=>{history.push(path);window.$wujie?.props.jump('inula')});
  }, [])

  // 在 react17-sub 路由下主动告知主应用路由跳转，主应用也跳到相应路由高亮菜单栏
  const location = useLocation()
  useEffect(() => {
    window.$wujie?.bus.$emit('sub-route-change', "inula", location.pathname)
  }, [location])

  return (
    <nav style={{ width: '400px', display: 'flex', justifyContent: 'space-around' }}>
      <NavLink to="/child_home" style={{ color: '#f16b5f', textDecoration: 'none' }}>首页</NavLink>
      <NavLink to="/child_location" style={{ color: '#f16b5f', textDecoration: 'none' }}>路由</NavLink>
      <NavLink to="/child_repo" style={{ color: '#f16b5f', textDecoration: 'none' }}>仓库</NavLink>
    </nav>

  )
}


function App() {
  return (
    <div class="container">
      <BrowserRouter>
        <div>
          <Nav />
          <Switch>
            <Route exact path="/child_home">
              <Home />
            </Route>
            <Route path="/child_location">
              <Location />
            </Route>
            <Route path="/child_repo">
              <Repo />
            </Route>
            <Route path="/">
              <Redirect to="/child_home" />
            </Route>
          </Switch>
          {/* <Routes>
            <Route exact path="/child_home" element={<Home />} />
            <Route path="/child_location" element={<Location />} />
            <Route exact path="/" element={<Navigate to="/child_home" />} />
          </Routes> */}
        </div>
      </BrowserRouter>
    </div>
  );
}

Inula.render(<App />, document.getElementById('root'));
